<template>
  <div class="form-menu-detail-view">
    <a-button icon="setting" shape="round" @click="addNew"
              v-show="!detailViews || !detailViews.length">配置视图
    </a-button>
    <div class="form-menu-detail-view-item" v-for="item in detailViewConfigs">
      <a-button shape="circle" size="small" icon="plus" @click="addNew"/>
      <a-button shape="circle" size="small" icon="minus" @click="() => remove(item)"/>
      <span>视图:</span>
      <a-select placeholder="请选择视图" v-model="item.viewId" style="min-width: 150px;">
        <a-select-option v-for="view in views" :key="view.id" :value="view.id">
          {{ view.viewName }}
        </a-select-option>
      </a-select>
      <span>权限:</span>
      <a-select placeholder="请选择权限" v-model="item.actionId" style="min-width: 150px;">
        <a-select-option v-for="action in actions" :key="action.id" :value="action.id">
          {{ action.actionName }}
        </a-select-option>
      </a-select>
    </div>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition, createFormMenuDetailView} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FormMenuDetailViewsConfig',
  model: createModelForVue('detailViews'),
  props: {
    detailViews: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition),
  },
  methods: {
    addNew() {
      (this.detailViews || []).push(this.newConfig());
    },
    newConfig() {
      let {views, actions} = this.formDefinition;
      let res = createFormMenuDetailView();
      (views || []).forEach(item => {
        if (item.mainView) {
          res.viewId = item.id;
        }
      });

      (actions || []).forEach(item => {
        if (item.actionType === 'detail' && item.preset) {
          res.actionId = item.id;
        }
      });
      return res;
    },
    remove(item) {
      let index = this.detailViews.indexOf(item);
      if (index !== -1) {
        this.detailViews.splice(index, 1);
      }
    },
  },
  computed: {
    detailViewConfigs() {
      if (this.detailViews) return this.detailViews;
      let res = [];
      this.$emit('change', res);
      return res;
    },
    views() {
      return this.formDefinition && this.formDefinition.views || [];
    },
    actions() {
      return (this.formDefinition && this.formDefinition.actions || []).filter(item => item.actionType === 'detail');
    },
  }
};
</script>
<style>
.form-menu-detail-view {

}

.form-menu-detail-view-item > * {
  margin-right: 10px;
}

.form-menu-detail-view-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
}
</style>